<template>
	<view class="sureOrder">
		<view class="addressbox" v-if="addressInfo.realname">
			<view class="leftbox">
				<view class="address">
					<text class="site">{{addressInfo.realname}}{{addressInfo.telephone}}</text>
					<text class="default" v-if="addressInfo.isDefaultAddress">默认</text>
				</view>

				<view class="name">
					{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.area}}{{addressInfo.detailedAddress}}
				</view>
			</view>

			<view class="rightbox" @click="modifyAddressFun">
				<uni-icons type="compose" :size="24" color="#BDBCC1"></uni-icons>
			</view>
		</view>
		<view class="addAddress " v-if="!addressInfo.realname" @click="modifyAddressFun">
			点击添加服务地址
		</view>
		<view class="store" v-if="storeInfo">
			<view class="name">
				{{storeInfo.productName}}
			</view>
			<view class="list">
				<view class="left">
					<image :src="storeInfo.pictureUrl" mode="widthFix"></image>
					<!-- <image src="@/static/store/列表图@3x.png" mode="widthFix"></image> -->

				</view>
				<view class="center">
					<view class="title">
						{{storeInfo.title}}
					</view>
					<view class="count">
						<text class="price">服务费:</text>
						<text class="uncountPrice">￥{{storeInfo.price}}</text>
						<!-- <text class="uncountPrice" v-if="productId==18 && degree==1">￥{{135*countValue}}</text>
						<text class="uncountPrice" v-if="productId==18 && degree==2">￥{{120*countValue}}</text>
						<text class="uncountPrice" v-if="productId==18 && degree==3">￥{{105*countValue}}</text>
						<text class="uncountPrice" v-if="productId!=18">￥{{storeInfo.price}}</text> -->
					</view>
				</view>
			</view>
		</view>
		<view class="serviceTime">
			<text>服务时间</text>
			<view class="choice">
				<text>选择日期:</text>
				<!--  2024-01-30-->
				<picker mode="date" :value="currentdate" :start="threeDays" @change="bindDateChange">
					<view class="uni-input" style="color: #2979ff">{{currentdate}}</view>
				</picker>
				<text>开始时间:</text>
				<picker mode="time" :value="timeone" start="09:00" end="15:00" @change="bindTimeChange">
					<view class="uni-input" style="color: #2979ff">{{timeone}}</view>
				</picker>
				<text>结束时间:</text>
				<picker mode="time" :value="timetwo" :start="timeone" end="18:00" @change="bindTimeChangeTwo">
					<view class="uni-input" style="color: #2979ff">{{timetwo}}</view>
				</picker>
			</view>
			<view class="tips">
				<uni-icons type="help" :size="15"></uni-icons>
				选择的为期望上门时间,稍后客服将与您确认具体上门时间。
			</view>

		</view>
		<!-- <view class="payment">
			<text>支付方式</text>
			<view class="pay">
				<uni-data-checkbox v-model="radio" :localdata="paymentMehond"></uni-data-checkbox>
			</view>

		</view> -->
		<view class="message">
			<text class="word">买家留言</text>
			<view class="pay">
				<uni-easyinput :inputBorder="false" v-model="payvalue" placeholder="请输入留言"></uni-easyinput>
			</view>

		</view>
		<view class="message">
			<text class="word">可使用优惠券</text>
			<view class="pay" v-if="YhAmount" @click="jumpYh">
				优惠金额 {{proxy.sjuLogin.getValue("UniversalCouponAmount")}}
			</view>
			<view class="pay" v-else @click="jumpYh">
				查看可用优惠券
			</view>


		</view>

		<view class="commit">
			<text class="all">合计</text>
			<text class="price" v-if="storeInfo">￥{{disCountValue}}元</text>
			<text class="sure" @click="surefun">确认预约</text>
		</view>
	</view>
</template>

<script setup>
	// import { saveValue } from '../../../common/sju.login';
	const {
		proxy
	} = getCurrentInstance()
	const timeone = ref('12:00')
	const timetwo = ref('15:00')
	const deadLine = ref('15:00')
	const price = ref()
	const totalprice = ref()
	const openId = ref()
	const currentdate = ref('')
	const threeDays = ref()
	const addressInfo = ref({
		'realname': '',
		'telephone': '',
		'province': '',
		'city': '',
		'area': '',
		'detailedAddress': '',
		'isDefaultAddress': '',
		'addressId': ''

	})
	const storeInfo = ref(null)
	const disCountValue = ref(null)
	const radio = ref(0)
	const productId = ref(null)
	const degree = ref(null)
	const paymentMehond = ref([{
		text: '线上支付',
		value: 0
	}])
	const countValue = ref()
	const defaultAddress = ref()
	const payvalue = ref()
	const YhAmount = ref(null)
	const bindTimeChange = (e) => {
		timeone.value = e.detail.value.split(':')[0] + ':00'
		// price.value =50;
		let totalTime = Number(timetwo.value.split(':')[0]) - Number(timeone.value.split(':')[0])
		totalprice.value = price.value * totalTime
		console.log(totalprice.value)
	}
	const bindTimeChangeTwo = (e) => {
		timetwo.value = e.detail.value.split(':')[0] + ':00'
		console.log(Number(e.detail.value.split(':')[0]))
		// price.value =50;
		let totalTime = Number(timetwo.value.split(':')[0]) - Number(timeone.value.split(':')[0])
		totalprice.value = price.value * totalTime
		console.log(totalprice.value)
	}
	const bindDateChange = (e) => {
		currentdate.value = e.detail.value
		console.log(e.detail.value)
	}
	onMounted(() => {
		getDate()
		queryAddressListFun()

	})
	onLoad((options) => { //获取路由参数
		console.log(options.id)
		productId.value = options.id
		countValue.value = options.count
		degree.value = options.degree

	})
	onShow(() => {
		console.log(123)
		addressInfo.value.realname = proxy.sjuLogin.getValue("realname")
		addressInfo.value.telephone = proxy.sjuLogin.getValue("telephone")
		addressInfo.value.province = proxy.sjuLogin.getValue("province")
		addressInfo.value.city = proxy.sjuLogin.getValue("city")
		addressInfo.value.area = proxy.sjuLogin.getValue("area")
		addressInfo.value.detailedAddress = proxy.sjuLogin.getValue("detailedAddress")
		addressInfo.value.isDefaultAddress = proxy.sjuLogin.getValue("isDefaultAddress")
		addressInfo.value.addressId = proxy.sjuLogin.getValue("id")
		console.log(proxy.sjuLogin.getValue("realname"))
		if (proxy.sjuLogin.getValue("UniversalCouponAmount")) {
			YhAmount.value = proxy.sjuLogin.getValue("UniversalCouponAmount")
		}
		getStoreInfo()

	})

	const queryAddressListFun = () => {
		proxy.sjuRequest.request("/api/weChatMall/address/queryAddressList/" + proxy.sjuLogin.getValue(
				"miaoMaGJOpenid"),
			'post').then(res => {
			console.log(res.data)
			for (let i = 0; i < res.data.length; i++) {
				if (res.data[i].isDefaultAddress == 1) {
					// defaultAddress.value.realname= res.data[i].realname
					// console.log(res.data[i].realname)
					addressInfo.value.realname = res.data[i].realname
					addressInfo.value.telephone = res.data[i].telephone
					addressInfo.value.province = res.data[i].province
					addressInfo.value.city = res.data[i].city
					addressInfo.value.area = res.data[i].area
					addressInfo.value.detailedAddress = res.data[i].detailedAddress
					addressInfo.value.isDefaultAddress = res.data[i].isDefaultAddress
					addressInfo.value.addressId = res.data[i].id
					// proxy.sjuLogin.saveValue("realname", res.data[i].realname)
					// proxy.sjuLogin.saveValue("telephone", res.data[i].telephone)
					// proxy.sjuLogin.saveValue("province", res.data[i].province)
					// proxy.sjuLogin.saveValue("city", res.data[i].city)
					// proxy.sjuLogin.saveValue("area", res.data[i].area)
					// proxy.sjuLogin.saveValue("detailedAddress", res.data[i].detailedAddress)
					// proxy.sjuLogin.saveValue("isDefaultAddress", res.data[i].isDefaultAddress)
				}

			}

			console.log(addressInfo.value.realname)
		})
	}
	const getStoreInfo = () => {
		proxy.sjuRequest.request("/api/weChatMall/product/queryProduct/" + productId.value, 'post').then(res => {
			// console.log(res.data.product)
			// console.log(proxy.sjuLogin.getValue("feiYhj"))
			storeInfo.value = res.data.product
			storeInfo.value.price = storeInfo.value.price * countValue.value
			price.value = storeInfo.value.price
			console.log(storeInfo.value.price)
			//初始化总价
			totalprice.value = price.value * 3
			if (proxy.sjuLogin.getValue("UniversalCouponAmount")) {
				disCountValue.value = storeInfo.value.price - proxy.sjuLogin.getValue("UniversalCouponAmount")
			} else {
				disCountValue.value = storeInfo.value.price
			}
		})
		//获取轮播图
		// proxy.sjuRequest.request("/api/weChatMall/product/queryWheelPlantPic/" + productId.value, 'post').then(res => {
		// 	console.log(res.data)
		// 	bannerList.value = res.data
		// 	console.log(bannerList.value)
		// 	console.log(bannerList.value[0].imageUrl)
		// })


	}
	const getDate = () => {
		// const date = new Date();
		// let year = date.getFullYear();
		// let month = date.getMonth() + 1;
		// let day = date.getDate();
		// console.log(date.setDate(date.getDate()+3))
		// month = month > 9 ? month : '0' + month;
		// day = day > 9 ? day : '0' + day;
		// currentdate.value = `${year}-${month}-${day}`

		let day3 = new Date();
		day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000 * 3);
		let month = day3.getMonth() + 1;
		month = month > 9 ? month : '0' + month;
		console.log(month)
		let s3 = day3.getFullYear() + "-" + month + "-" + day3.getDate();
		currentdate.value = s3 //day3.getFullYear() + "-" + (day3.getMonth() + 1) + "-" + day3.getDate()
		console.log(currentdate.value)
		threeDays.value = currentdate.value // '2024-01-30'
		console.log(threeDays.value)

		// return `${year}-${month}-${day}`;
	}

	const surefun = () => {
		console.log(proxy.sjuLogin.getValue("couponCode"))

		proxy.sjuRequest.request("/api/weChatMall/order/createOrder", 'post', {
			"openId": proxy.sjuLogin.getValue("miaoMaGJOpenId"),
			"mobile": addressInfo.value.telephone,
			"couponValue": 0,
			"addressId": addressInfo.value.addressId,
			"mobile": addressInfo.value.telephone,
			"address": addressInfo.value.province + addressInfo.value.city + addressInfo.value.area +
				addressInfo.value.detailedAddress,
			"startTime": currentdate.value + ' ' + timeone.value,
			"endTime": currentdate.value + ' ' + timetwo.value,
			"message": payvalue.value,
			"userRemark": proxy.sjuLogin.getValue("couponCode"),
			"productCatList": {
				"productId": productId.value,
				"totalPrice": disCountValue.value, //truePrice,
				"totalNum": 1,
				"title": storeInfo.value.productName,
				"attr": "2",
				"pictureUrl": storeInfo.value.pictureUrl

			}
		}).then(res => {
			if (res.code == "200") {
				pay(res.data);
			} else {
				proxy.sjuAlert.showError("下单失败");
			}

		})

	}
	const pay = (orderId) => {
		proxy.sjuRequest.request("/api/weChatMall/order/createPay/" + proxy.sjuConfig.appInfo.appId + "/" + orderId,
			'post').then(res => {
			proxy.sjuPay.payWeixinH5(JSON.stringify(res.data.result), "serviceOrder");
		})
	}
	const modifyAddressFun = () => {
		proxy.sjuNav.navigateTo('/my/myAddress')
	}
	const jumpYh = () => {
		proxy.sjuNav.navigateTo('/my/couponModule')
	}
</script>

<style lang="scss" scoped>
	.sureOrder {
		.addAddress {
			width: 100%;
			height: 150rpx;
			padding: 20rpx;
			background: #FAFAFA;
			color: #2979ff;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
		}

		.addressbox {
			width: 100%;
			height: 150rpx;
			padding: 20rpx;
			background: #FAFAFA;
			box-sizing: border-box;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;

			.leftbox {
				.address {
					display: flex;
					flex-wrap: nowrap;

					.site {
						color: #161616;
						font-size: 28rpx;
						font-weight: bold;
					}

					.default {
						padding: 5rpx 10rpx;
						background: #FDEBEB;
						color: #DF605E;
						font-size: 20rpx;
						margin: 0 10rpx;
						border-radius: 3px;
					}

					.home {
						padding: 5rpx 10rpx;
						background: #FDEBEB;
						color: #DF605E;
						font-size: 20rpx;
						margin: 0 10rpx;
						border-radius: 3px;
					}

				}


				.name {
					font-size: 24rpx;
					color: #8B8A91;
					height: 30px;
					line-height: 30px;
				}
			}

			.addAddress {
				color: #2979ff;
			}
		}

		.store {
			padding: 30rpx;
			box-sizing: border-box;

			.name {
				font-size: 28rpx;
				color: #161616;
				line-height: 1.8;
				font-weight: bold;
			}

			.list {
				display: flex;
				flex-direction: row;
				// line-height: 2;
				box-sizing: border-box;


				.left {
					width: 20%;

					image {
						width: 100%
					}
				}

				.center {
					width: 60%;
					display: flex;
					flex-direction: column;
					line-height: 1.5;
					margin: 0 2%;

					.title {
						font-size: 25rpx;
						color: #161616;
						line-height: 2;
						font-weight: bold;
					}

					.count {
						font-size: 25rpx;
						color: #161616;

						.uncountPrice {
							color: #D43635;
							font-size: 22rpx;
							// text-decoration: line-through;
							margin-left: 10rpx;
						}
					}
				}


			}
		}

		.serviceTime {
			padding: 20rpx;
			line-height: 1.8;
			box-sizing: border-box;
			border-bottom: 10px solid #FAFAFA;
			border-top: 10px solid #FAFAFA;

			.choice {
				display: flex;
				flex-direction: row;
				justify-content: space-around;

				text {
					color: #ADADAD;
				}
			}

			.tips {
				border-top: 1px solid #ccc;
				font-size: 20rpx;
				color: #2F2F2F;
				align-items: center;
				margin-top: 15rpx;
			}

		}

		.payment {
			display: flex;
			flex-direction: row;
			height: 50px;
			align-items: center;
			padding: 0 30rpx;

			.pay {
				margin-left: auto;

			}

		}

		.message {
			border-top: 10px solid #FAFAFA;
			border-bottom: 10px solid #FAFAFA;
			padding: 0 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.word {
				height: 50px;
				line-height: 50px;
				// flex-grow:1
			}

			.pay {
				flex-grow: 1;
				color: #ADADAD;
				text-align: right;

			}
		}

		.region {
			display: flex;
			flex-direction: row;

			align-items: center;
			padding: 0 30rpx;
			height: 50px;
			line-height: 50px;
			border-bottom: 10px solid #FAFAFA;

			.name {
				color: #ADADAD;
			}

			.city {
				margin-left: 30rpx;
			}
		}

		.commit {
			width: 100%;
			height: 60px;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			padding: 0 30rpx;
			box-sizing: border-box;
			align-items: center;

			.all {
				color: #858484;
				font-size: 25rpx;
			}

			.price {
				color: #D43635;
				font-size: 35rpx;
			}

			.sure {
				padding: 20rpx 40rpx;
				background: #FD2E31;
				color: #fff;
				border-radius: 30px;
				margin-left: auto;

			}
		}


	}
</style>